<template>
  <div>
    <el-button type="primary"
               class="theme-button"
               v-popover:popover1>{{cModule}}<i class="el-icon-arrow-down button-icon"></i></el-button>
    <el-collapse-transition>
      <el-popover popper-class='all-module'
                  ref="popover1"
                  placement="bottom"
                  trigger="hover">
        <div v-for="item in module"
             :key="item.appName"
             :class="['module-cell',cModule === (language === 'en_US'?item.appNameEn:item.appName)?'currentModule':'']"
             @click="selectModule(item)">
          <svg class="icon"
               aria-hidden="true">
            <use :xlink:href="`#${item.appIcon}`"></use>
          </svg>
          <span>{{item.appName}}</span>
          <span>{{item.appNameEn}}</span>
        </div>
      </el-popover>
    </el-collapse-transition>
  </div>
</template>

<script>
import config from '../sidebar/config.js'
import { iconfontSymbol } from '../../../config/env.js'
import { loadJs } from '../../../util/util.js'

import {
  mapGetters
} from 'vuex'
export default {
  data () {
    return {
      cModule: '',
      tagFlag: false,
    }
  },

  watch: {},
  created () {
    loadJs(iconfontSymbol)
    this.$store.dispatch('getMinioServe')
    this.$store.dispatch('GetModule').then(data => {
      if (data.length === 0) return
      const getAllMenu = (index = 0, menuList = []) => {
        return new Promise((resolve, reject) => {
          menuList.push(...data[index].menuTreeList)
          if (data[++index]) resolve(getAllMenu(index, menuList))
          else resolve(menuList)
        })
      }
      getAllMenu().then(res => {
        const menuData = this.setMenuPath(res)
        this.$router.$avueRouter.formatRoutes(menuData, true)
        this.$router.$avueRouter.formatComponents(menuData, true)
        this.$store.dispatch('SetMenu', menuData)
        const getModule = () => {
          if (this.currentModule) {
            if (data.map(res => { return res.appName }).indexOf(this.currentModule.appName) !== -1) return this.currentModule
            else return data[0]
          } else {
            return data[0]
          }
        }
        const mObj = getModule()
        this.cModule = this.language === 'en_US' ? mObj.appNameEn : mObj.appName
        this.$store.dispatch('SetModule', mObj)
        if (mObj.frontHostUrl && process.env.NODE_ENV !== 'development' && window.location.href.split('#')[0] !== mObj.frontHostUrl && this.module.length === 1) {
          window.location.href = mObj.frontHostUrl
        }
      })
    })
  },
  computed: mapGetters(['module', 'tag', 'currentModule', 'tagWel', 'language']),
  methods: {
    setMenuPath (menus) {
      if (Array.isArray(menus))
        menus.some(res => {
          res.path = res.path + '-' + res.appId
          if (res.children.length > 0) res.children = this.setMenuPath(res.children)
        })
      return menus
    },
    // 找到当前tag对应哪个菜单
    getIndexByTag (menu) {
      menu.some(res => {
        if (res.path === this.tag.value) {
          this.tagFlag = true
          return true
        } else if (Array.isArray(res.children)) this.getIndexByTag(res.children)
      })
    },
    selectModule (item) {
      this.cModule = this.language === 'en_US' ? item.appNameEn : item.appName
      this.$refs.popover1.doClose()
      this.$store.commit("DEL_ALL_TAG");
      this.$router.push({
        path: this.$router.$avueRouter.getPath({
          src: this.tagWel.value
        }),
        query: this.tagWel.query
      });
      this.$store.dispatch('SetModule', item)
      if (item.frontHostUrl && process.env.NODE_ENV !== 'development' && window.location.href.split('#')[0] !== item.frontHostUrl) {
        window.location.href = item.frontHostUrl
      }
    },
  }
}      
</script>

<style>
.theme-button{
  font-size: 13px !important;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 20px;
}
.all-module {
  top: 50px !important;
  background-color: #fff !important;
  box-sizing: border-box;
  margin-top: 22px !important;
  display: flex;
  flex-flow: row wrap;
  max-width: 806px;
}

.module-cell {
  width: 120px;
  height: 100px;
  padding: 25px 0;
  border-radius: 2px;
  box-sizing: border-box;
  opacity: 0.9;
  color: #b6c6d4;
  cursor: pointer;
  text-align: center;
  margin: 15px 5px;
  background: rgba(217, 217, 217, 0.1) !important;
  border-radius: 4px;
}
.module-cell span {
  display: block;
  margin-top: 5px;
}
.button-icon {
  font-size: 12px;
  margin-left: 10px;
  margin-right: -10px;
}
</style>
